<template>
  <view class="bitbeast">
    <Navbar :title="navbarTitle"> </Navbar>
    <view
      class="bar"
      :style="{
        backgroundImage: `url(${detail.goods_pic})`,
        backgroundSize: '100% 100%',
      }"
    >
    </view>
    <view class="top">
      <view>{{ t("detail.bit") }} {{ detail.goods_name }}</view>
      <view>
        <text>{{ detail.click_total }}</text>
        <text>{{ t("detail.cli") }}</text>
        <image
          class="img"
          src="/static/bitbeast/Frame.png"
          mode="scaleToFill"
        />
      </view>
    </view>
    <view class="top" style="margin-top: 26rpx">
      <view style="font-weight: normal"
        >{{ t("detail.autho0r") }}：{{ detail?.goods_author }}</view
      >
      <view>
        <text>{{ detail.like_total }}</text>
        <text>{{ t("detail.like") }}</text>
        <image
          class="img"
          v-if="like"
          src="/static/NFT/like.png"
          mode="scaleToFill"
        />
        <image
          class="img"
          @click="onLike"
          v-else
          src="/static/NFT/Frame(1).png"
          mode="scaleToFill"
        />
      </view>
    </view>
    <view class="textarea">{{ detail.goods_description }}</view>
    <view class="detail">
      <view class="top">
        <view class="left">
          <text style="font-size: 26rpx"
            >Metaverse {{ t("detail.price") }}</text
          >
          <view class="left-a">
            <view style="font-size: 28rpx">{{
              `${detail.start_price}USDT - ${detail.end_price}USDT`
            }}</view>
            <image
              class="img"
              src="/static/bitbeast/Frame(2).png"
              mode="scaleToFill"
            />
          </view>
        </view>
        <!-- <view class="right">
          <text style="font-size: 26rpx">{{ t("detail.eamings") }}</text>
          <view class="right-a">
            <image
              class="img"
              src="/static/bitbeast/Frame(2).png"
              mode="scaleToFill"
            />
            <view style="font-size: 28rpx">{{ detail.earning }}</view>
          </view>
        </view> -->
      </view>

      <view class="bottom">
        <view class="left" style="width: 100%">
          <text style="font-size: 26rpx">{{ t("detail.rate") }}</text>
          <view class="left-a" style="width: 100%">
            <view
              style="
                font-size: 28rpx;
                width: 100%;
                font-weight: 900;
                color: #ffffff;
                margin-top: 18rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
              >{{ detail.send_money }}%
              <!-- <text v-if="detail.status == 1" style="font-size: 26rpx">{{
                t('detail.on')
              }}</text> -->
              <text v-if="detail.status == 2" style="font-size: 26rpx">{{
                t("detail.end")
              }}</text>
              <text v-if="detail.status == 3" style="font-size: 26rpx">{{
                t("detail.end")
              }}</text>
              <text v-if="detail.status == 0" style="font-size: 26rpx">{{
                t("detail.wait")
              }}</text>
            </view>
          </view>
        </view>
        <view class="right">
          <view class="right-a" v-if="detail.remain_time">
            <text v-if="detail.status == 1" style="font-size: 26rpx">{{
              t("detail.on")
            }}</text>
            <view
              style="
                display: flex;
                align-items: center;
                font-size: 28rpx;
                font-weight: 400;
                color: #ffffff;
                margin-bottom: 20rpx;
                background-image: url('/static/bitbeast/Rectangle 47.png');
              "
            >
              <uni-countdown
                @timeup="timeup"
                color="#fff"
                splitorColor="#fff"
                :show-day="false"
                :hour="hours"
                :minute="minutes"
                :second="seconds"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
    <button @click="showBuyPopup" v-if="detail.status == 1">
      {{ t("reco.buy") }}
    </button>
    <button class="btn-a" v-if="detail.status != 1">{{ t("reco.buy") }}</button>

    <!-- 弹窗 -->
    <Popup :title="t('detail.msg')" ref="popup" />
    <!-- 弹窗 -->
    <teleport to="body">
      <template v-if="displayPopup">
        <view class="popup-overlay">
          <view class="popup-content">
            <view class="title">
              <view></view>
              <view>{{ t("bankDetail.bid") }}</view>
              <view class="close" @click="displayPopup = false">X</view>
            </view>
            <view class="content">
              <view class="item">
                <view class="item-title">{{ t("bankDetail.rise") }}</view>
                <view class="item-value">
                  <view>{{ detail.start_price || 0 }}</view>
                  <view>USDT</view>
                  <img src="/static/Withdrawal/Frame.png" alt="" />
                </view>
              </view>
              <view class="item">
                <view class="item-title">{{ t("bankDetail.rate") }}</view>
                <view class="item-value">{{ detail.send_money || 0 }}%</view>
              </view>
              <view class="item">
                <view class="item-title">{{ t("bankDetail.input1") }}</view>
                <view class="item-value">
                  <view>{{ Number(buyPrice).toFixed(2) }}</view>
                  <view>USDT</view>
                  <img src="/static/Withdrawal/Frame.png" alt=""
                /></view>
              </view>
              <view class="item">
                <view class="item-title">{{ t("bankDetail.estimate") }}</view>
                <view class="item-value">
                  <view>{{
                    Number((buyPrice * detail.send_money) / 100).toFixed(2)
                  }}</view>
                  <view>USDT</view>
                  <img src="/static/Withdrawal/Frame.png" alt=""
                /></view>
              </view>
              <view class="input-item">
                <view class="input-title">{{ t("bankDetail.price") }}</view>
                <view class="input-content">
                  <input
                    v-model="buyPrice"
                    :placeholder="t('bankDetail.input1')"
                  />
                  <view>USDT</view>
                </view>
              </view>
            </view>
            <view class="confirm-btn" @click="confirmCreate">
              {{ t("bankDetail.auction") }}
            </view>
          </view>
        </view>
      </template>
    </teleport>
  </view>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { onShow, onHide, onLoad } from "@dcloudio/uni-app";
import { ref, computed, onMounted } from "vue";
import Navbar from "../../components/Navbar.vue";
import Popup from "../../components/Popup.vue";
import api from "../../networks/apis";
import { useUserStore } from "../../store";
const { t } = useI18n();
const detail = ref({});
const useStore = useUserStore();
const navbarTitle = ref();
const displayPopup = ref(false); //展示购买弹窗
const buyPrice = ref(""); //购买价格
onLoad(async ({ id }) => {
  ID.value = id;
  const res = await api.nftdetail(id);
  console.log(res.data);
  detail.value = res.data;
  navbarTitle.value = t("detail.bit") + " " + detail.value.goods_name;
  secondsToHMS(detail.value.remain_time); //倒计时函数
});
const ID = ref();

//用ref调用子组件的方法
const msg = "Purchase successful";
const popup = ref();

// 填写购买价格
const showBuyPopup = () => {
  displayPopup.value = true;
};
//生成订单
const confirmCreate = async () => {
  if (!buyPrice.value) {
    uni.showToast({
      icon: "none",
      title: "please enter the price amount",
    });
    return;
  }
  displayPopup.value = false;
  const params = {
    buy_price: buyPrice.value,
    goods_id: detail.value.id,
  };
  const { data, code, msg } = await api.createOrder(params);
  if (code != 10000) {
    buyPrice.value = "";
    console.log(data);
    popup.value.showPopup();
    setTimeout(() => {
      uni.navigateBack();
    }, 2000);
  } else {
    uni.showToast({
      icon: "none",
      title: msg,
    });
    uni.navigateBack();
  }
};
//倒计时
const hours = ref(0);
const minutes = ref(0);
const seconds = ref(0);
const secondsToHMS = (totalSeconds) => {
  hours.value = Math.floor(totalSeconds / 3600);
  minutes.value = Math.floor((totalSeconds % 3600) / 60);
  seconds.value = totalSeconds % 60;
};
//倒计时结束时触发
const countdownFinished = ref(true);
const timeup = async () => {
  await api.nftdetail(ID.value);
  countdownFinished.value = false;
};

const onLike = async () => {
  const { data } = await api.updateLike(detail.value.id);
  console.log(data);
  detail.value.like_total = data.like_total;
  const res = await api.nftdetail(ID.value);
  console.log(res.data);
  detail.value = res.data;
};
//监听爱心事件
const like = computed(() => {
  if (detail.value) {
    return detail.value.like_user_list?.includes(useStore.user.id);
  } else {
    return false;
  }
});
</script>

<style lang="scss" scoped>
.bitbeast {
  width: 750rpx;
  /* height: 100vh; */
  padding-bottom: 100rpx;
  margin: 0 auto;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);

  .bar {
    width: 100%;
    height: 474rpx;
    margin-bottom: 50rpx;
    margin-top: 30rpx;
  }

  .top {
    width: 690rpx;
    height: 38rpx;
    display: flex;
    margin: 0 auto;
    font-size: 26rpx;
    font-family: Arial, Arial;
    font-weight: 900;
    color: #ffffff;
    line-height: 30rpx;
    justify-content: space-between;
    align-items: center;

    text {
      font-size: 24rpx;
      font-family: Arial, Arial;
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
      line-height: 28rpx;
    }

    text:nth-child(2) {
      width: 56rpx;
      margin-left: 8rpx;
      margin-right: 12rpx;
    }

    .img {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .textarea {
    margin: 38rpx auto 0;
    width: 700rpx;
    height: 210rpx;
    font-size: 26rpx;
    font-family: Arial, Arial;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.5);
    line-height: 30rpx;
  }

  .detail {
    width: 690rpx;
    height: 322rpx;
    display: flex;
    padding: 24rpx;
    margin: 28rpx auto 0;
    background-image: url("/static/bitbeast/Rectangle 73.png");
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;

    .top {
      width: 640rpx;
      height: 100rpx;
      margin-top: 18rpx;
      display: flex;
      align-items: center;

      .left {
        .left-a {
          display: flex;
          align-items: center;
        }
      }

      .right {
        text-align: right;

        .right-a {
          display: flex;
          align-items: center;
        }
      }
    }

    .bottom {
      margin-top: 35rpx;
      display: flex;
      font-family: Arial, Arial;
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
      line-height: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        .left-a {
          display: flex;
          align-items: center;
        }
      }

      .right {
        text-align: right;

        .right-a {
          width: 150rpx;
          height: 64rpx;
          /* background-image: url('/static/bitbeast/Rectangle 47.png'); */
          text-align: center;
          line-height: 64rpx;
          margin-top: 10rpx;
        }
      }
    }
  }

  button {
    width: 686rpx;
    height: 100rpx;
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: bold;
    color: #ffffff;
    line-height: 38rpx;
    background-image: url("/static/bitbeast/Rectangle 62.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 44rpx;
    text-align: center;
    line-height: 100rpx;
  }

  .btn-a {
    width: 686rpx;
    height: 100rpx;
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: bold;
    color: #ffffff;
    line-height: 38rpx;
    background-image: url("/static/Rectangle 62 (1).png");
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 44rpx;
    text-align: center;
    line-height: 100rpx;
  }
}
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  width: 688rpx;
  min-height: 168rpx;
  background-color: #24292f;
  text-align: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 32rpx;
  .title {
    width: 100%;
    height: 128rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28rpx;
    .close {
      width: 45rpx;
      height: 45rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1rpx solid #999494;
      font-size: 24rpx;
      border-radius: 50%;
      color: #999494;
    }
  }
  .content {
    width: 100%;
    // height: 469rpx;
    padding: 18rpx;
    // border: 1rpx solid #00d084;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .item {
      width: 49%;
      margin-top: 25rpx;
      .item-title {
        height: 85rpx;
        // line-height: 85rpx;
        font-size: 26rpx;
        color: #999494;
      }
      .item-value {
        height: 89rpx;
        line-height: 89rpx;
        background-color: #38393d;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .input-item {
      margin: 0 auto;
      width: 80%;
      margin-top: 25rpx;
      .input-title {
        height: 49rpx;
        line-height: 49rpx;
        text-align: center;
      }
      .input-content {
        width: 100%;
        line-height: 109rpx;
        border: 1rpx solid #414c51;
        display: flex;
        align-items: center;
      }
    }
  }
  .confirm-btn {
    height: 100rpx;
    background-image: url("/static/bitbeast/Rectangle 62.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 144rpx;
    text-align: center;
    line-height: 100rpx;
  }
  text {
    width: 368rpx;
    height: 36rpx;
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: bold;
    color: #00d084;
    line-height: 168rpx;
  }
}
</style>
